<template>
  <div id="content">
    <h1>人员审核</h1>
    <Divider />
    <div class="demo-split">
      <Split v-model="split1">
        <div slot="left" class="demo-split-pane">
          <div style="padding: 10px; background: #f8f8f9">
            <Card
              title="概览"
              icon="ios-options"
              :padding="0"
              shadow
              style="width: 300px"
            >
              <CellGroup>
                <Cell title="情况" />
                <Cell title="日期" :label="dates" />
                <Cell title="已处理" :label="dones" />

                <Cell title="今天" disabled />
                <Cell title="Selected" selected />
                <Cell title="未处理">
                  <Badge :count="today" type="info" slot="extra" />
                </Cell>
                <Cell title="黑暗模式">
                  <Switch v-model="switchshow" slot="extra" />
                </Cell>
              </CellGroup>
            </Card>
          </div>
        </div>
        <div slot="right" class="demo-split-pane">
          <Table border :columns="columns1" :data="data1">
            <template slot-scope="{ row }" slot="name">
              <strong>{{ row.name }}</strong>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <Button
                type="info"
                size="small"
                style="margin-right: 5px"
                @click="show(row)"
                >查看</Button
              >
              <Button
                type="success"
                size="small"
                style="margin-right: 5px"
                @click="success(index)"
                >同意</Button
              >
              <Button type="error" size="small" @click="refuse(index)"
                >驳回</Button
              >
            </template>
          </Table>
        </div>
      </Split>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      split1: 0.5,
      switchshow: true,
      dates: "2021-05-23",
      dones: "30",
      today: 1,
      infos: [],
      columns1: [
        {
          title: "姓名",
          slot: "name",
          align: "center",
        },
        {
          title: "身份证号",
          key: "idcard",
          align: "center",
        },

        {
          title: "Action",
          slot: "action",
          width: 300,
          align: "center",
        },
      ],
      data1: [],
    };
  },
  mounted() {
    var today = new Date();
    var y = today.getFullYear();
    var m = today.getMonth() + 1;
    var d = today.getDate();
    m = m < 10 ? "0" + m : m;
    d = d < 10 ? "0" + d : d;
    this.dates = y + "-" + m + "-" + d;
    this.axios
      .get("/api/check")
      .then((r) => {
        this.data1 = r.data.infos;
        this.today = this.data1.length;
        this.dones = r.data.total.toString();
      })
      .catch((e) => {
        this.$Message.error("E" + e);
      });
  },
  methods: {
    refreshpage(){
      this.axios
      .get("/api/check")
      .then((r) => {
        this.data1 = r.data.infos;
        this.today = this.data1.length;
        this.dones = r.data.total.toString();
      })
      .catch((e) => {
        this.$Message.error("E" + e);
      });
    },
    show(data) {
      console.log(data);
    },
    success(index) {
      var to_tornado = {
        info: this.data1[index],
        state: "success",
      };
      this.axios
        .post("/api/check",to_tornado)
        .then((r) => {
          this.$Message.info(r.data, to_tornado);
          self.refreshpage()
        })
        .catch((e) => {
          this.$Message.error("e" + e);
        });
    },
    refuse(index) {
      var to_tornado = {
        info: this.data1[index],
        state: "filed",
      };
      this.axios
        .post("/api/check",to_tornado)
        .then((r) => {
          this.$Message.info(r.data, to_tornado);
          self.refreshpage()
        })
        .catch((e) => {
          this.$Message.error("e" + e);
        });
    },
  },
};
</script>

<style scoped>
.demo-split {
  height: 600px;
  border: 1px solid #dcdee2;
}
.demo-split-pane {
  padding: 10px;
}
#content {
  /* text-align: center; */
  background-color: #f8f8f9;
}
h1 {
  font-family: "华文行楷", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
    sans-serif;
}
</style>>

